<template>
    <div class="colorFFF font_OPPOSans boxBody">
        <Tabs title="线上收缴总数">
            <template #btn>
                <div class="btnBox">
                    <div class="tabBtn font_OPPOSans colorF inline-block cursorPointer"
                         :class="{ tabBtnStu: timeNum === 1 }" @click="abBtnYear">本年</div>
                    <div class="tabBtn font_OPPOSans colorF inline-block cursorPointer"
                         :class="{ tabBtnStu: timeNum === 2 }" @click="abBtnAll">所有</div>
                </div>
            </template>
        </Tabs>
        <div class="content-body flex-box flex-direction-column">
            <div class="flex items-end justify-center" style="padding-top: 1.5rem">
                <BigDigits :value="total.toFixed(2).padStart(12, '0')"></BigDigits>
                <span style="margin-left: 0.75rem">元</span>
            </div>
            <div style="margin-top: 1.375rem">
                <div class="flex-box flex-align-items-center">
                    <div class="confiscate-text flex-box flex-align-items-center">
                        <svg-icon class="data_center_svg" icon-class="data_center1_svg" />
                        <div class="inline-block">
                            <p class="confiscate-top_text">物业费欠费总数</p>
                            <p class="quantity">{{ totalData.propertyFeeSum.toFixed(2) }} <span
                                      class="quantityCompany">万元</span></p>
                        </div>
                    </div>
                    <div class="confiscate-text flex-box flex-align-items-center">
                        <svg-icon class="data_center_svg" icon-class="data_center2_svg" />
                        <div class="inline-block">
                            <p class="confiscate-top_text">物业费收缴总数</p>
                            <p class="quantity">{{ totalData.propertyFeeArrearage.toFixed(2) }} <span
                                      class="quantityCompany">万元</span></p>
                        </div>
                    </div>
                    <div class="confiscate-text flex-box flex-align-items-center">
                        <svg-icon class="data_center_svg" icon-class="data_center3_svg" />
                        <div class="inline-block">
                            <p class="confiscate-top_text">其他费用收缴总数</p>
                            <p class="quantity">{{ totalData.otherExpensesSum.toFixed(2) }} <span
                                      class="quantityCompany">万元</span></p>
                        </div>
                    </div>
                </div>
                <div class="flex-box flex-align-items-center">
                    <div class="confiscate-text flex-box flex-align-items-center">
                        <svg-icon class="data_center_svg" icon-class="data_center4_svg" />
                        <div class="inline-block">
                            <p class="confiscate-top_text">停车费收缴总数</p>
                            <p class="quantity">{{ totalData.parkingFeeSum.toFixed(2) }} <span
                                      class="quantityCompany">万元</span></p>
                        </div>
                    </div>
                    <div class="confiscate-text flex-box flex-align-items-center">
                        <svg-icon class="data_center_svg" icon-class="data_center5_svg" />
                        <div class="inline-block">
                            <p class="confiscate-top_text">长期车收缴总数</p>
                            <p class="quantity">{{ longTotalMoney.toFixed(2) }} <span class="quantityCompany">万元</span>
                            </p>
                        </div>
                    </div>
                    <div class="confiscate-text flex-box flex-align-items-center">
                        <svg-icon class="data_center_svg" icon-class="data_center6_svg" />
                        <div class="inline-block">
                            <p class="confiscate-top_text">临时车收缴总数</p>
                            <p class="quantity">{{ temporaryTotalMoney.toFixed(2) }} <span
                                      class="quantityCompany">万元</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getLongTotalMoney, getTempTotalMoneyByVillage, paymentStatistics } from "src/api/largeDataScreen";
import BigDigits from "./BigDigits/index.vue"
import Tabs from "./Tabs.vue"
export default {
    name: "CenterTotalOnlinePayment",
    components: {
        Tabs,
        BigDigits
    },
    inject: ['villageId'],
    mounted() {
        this.setIntervalTotalFn()
    },
    destroyed() {
        clearInterval(this.timer);
        this.timer = null;
    },
    data() {
        return {
            timeNum: 1,
            timer: null,
            longTotalMoney: 0,
            temporaryTotalMoney: 0,
            totalData: {
                propertyFeeSum: 0,
                propertyFeeArrearage: 0,
                otherExpensesSum: 0,
                parkingFeeSum: 0,
                paymentSum: 0
            },
            total1: 0,
            total2: 0,
            total3: 0
        }
    },
    computed: {
        total() {
            return this.accAdd(this.accAdd(this.total1, this.total2), this.total3)
        }
    },
    methods: {
        abBtnYear() {
            this.timeNum = 1;
            clearInterval(this.timer);
            this.timer = null;
            this.setIntervalTotalFn()
        },
        abBtnAll() {
            this.timeNum = 2;
            clearInterval(this.timer);
            this.timer = null;
            this.setIntervalTotalFn()
        },
        setIntervalTotalFn() {
            const villageId = this.villageId
            if (villageId) {
                this.paymentStatistics(villageId, this.timeNum);
                this.getLongTotalMoney(villageId, this.timeNum);
                this.getTempTotalMoneyByVillage(villageId, this.timeNum);

                this.timer = setInterval(() => {
                    this.paymentStatistics(villageId, this.timeNum);
                    this.getLongTotalMoney(villageId, this.timeNum);
                    this.getTempTotalMoneyByVillage(villageId, this.timeNum)
                }, 20000);
            }
        },
        fn1(villageId, timeNum) {
            return new Promise((resolve, reject) => {
                getLongTotalMoney({ villageID: villageId, time: timeNum }).then(response => {
                    if (response.code == 20000) {
                        this.longTotalMoney = response.data;
                        resolve(response.data)
                    }
                });
            })
        },
        fn2(villageId, timeNum) {
            return new Promise((resolve, reject) => {
                getTempTotalMoneyByVillage({ villageID: villageId, time: timeNum }).then(response => {
                    if (response.code == 20000) {
                        this.temporaryTotalMoney = parseFloat(response.data);
                        resolve(response.data)
                    }
                })
            })
        },
        fn3(villageId, timeNum) {
            return new Promise((resolve, reject) => {
                paymentStatistics({ villageId: villageId, time: timeNum }).then(response => {
                    if (response.code == 20000) {
                        if (response.data) {
                            this.totalData = {
                                propertyFeeSum: response.data.propertyFeeSum || 0,
                                propertyFeeArrearage: response.data.propertyFeeArrearage || 0,
                                otherExpensesSum: response.data.otherExpensesSum || 0,
                                parkingFeeSum: response.data.parkingFeeSum || 0,
                                paymentSum: response.data.paymentSum || 0
                            };
                            resolve(response.data.paymentSum || 0)
                        }
                        resolve(0)
                    }
                })
            })
        },
        getLongTotalMoney(villageId, timeNum) {
            getLongTotalMoney({ villageID: villageId, time: timeNum }).then(response => {
                if (response.code == 20000) {
                    this.longTotalMoney = response.data;
                }
                this.total1 = this.longTotalMoney || 0;
            }).catch(() => {
                this.total1 = 0;
            })
        },
        getTempTotalMoneyByVillage(villageId, timeNum) {
            getTempTotalMoneyByVillage({ villageID: villageId, time: timeNum }).then(response => {
                if (response.code == 20000) {
                    this.temporaryTotalMoney = parseFloat(response.data);
                }
                this.total2 = this.temporaryTotalMoney || 0;
            }).catch(() => {
                this.total2 = 0;
            })
        },
        paymentStatistics(villageId, timeNum) {
            paymentStatistics({ villageId: villageId, time: timeNum }).then(response => {
                if (response.code == 20000) {
                    if (response.data) {
                        this.totalData = {
                            propertyFeeSum: response.data.propertyFeeSum || 0,
                            propertyFeeArrearage: response.data.propertyFeeArrearage || 0,
                            otherExpensesSum: response.data.otherExpensesSum || 0,
                            parkingFeeSum: response.data.parkingFeeSum || 0,
                            paymentSum: response.data.paymentSum || 0
                        }
                    }
                    this.total3 = response.data.paymentSum || 0;
                }
            }).catch(() => {
                this.total3 = 0;
            })
        },
        accAdd(arg1, arg2) {
            let r1, r2, m;
            try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
            try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
            m = Math.pow(10, Math.max(r1, r2));
            return (arg1 * m + arg2 * m) / m
        }
    }
}
</script>

<style scoped>
.boxBody {
    height: 100%;
}

.tabBtn {
    background: rgba(29, 28, 30, 0.1);
    box-shadow: inset 0 0 0.25rem rgba(255, 255, 255, 0.25);
    border-radius: 0.25rem 0 0 0.25rem;
    width: 3rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.75rem;
    text-align: center;
}

.tabBtn:last-child {
    margin-left: -4px;
    border-radius: 0 0.25rem 0.25rem 0;
}

.tabBtnStu {
    background: rgba(29, 28, 30, 0.1);
    box-shadow: inset 0 0 0.375rem #DDB15C;
    color: #DDB15C;
}

.btnBox {
    min-width: 6.5rem;
}

.content-body {
    height: calc(100% - 2.5rem);
}

.confiscate-text {
    flex: 1;
}

.data_center_svg {
    font-size: 5rem;
}

.confiscate-top_text {
    color: rgba(251, 229, 187, 0.8);
    font-size: 0.875rem;
}

.quantity {
    color: #FBE5BB;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 0 0.375rem rgba(251, 229, 187, 0.4);
}

.quantityCompany {
    font-size: 0.75rem;
    color: #FBE5BB;
    font-weight: normal;
}
</style>